import React, { Component } from "react";
import "./Tab.scss";
export default class Tab extends Component {
  state = {
    activeTab: "home",
    activeTabPathMap: {
      home: "/",
      community: "/community",
      cart: "/cart",
      my: "/my",
    },
  };
  componentDidMount() {
    let activeTab = this.props.match.url.split("/")[1];
    this.setState({
      activeTab,
    });
    //监听跳转也面试  tab组件的导航样式也改变
    window.addEventListener("hashchange", this.handleHashChange);
  }
  //外部跳转页面时导航样式改变
  handleHashChange = (params) => {
    let activeTab = this.props.match.url.split("/")[1];
    this.setState({
      activeTab,
    });
  };
  //卸载监听的事件
  componentWillUnmount() {
    window.removeEventListener("hashchange", this.handleHashChange);
  }
  handleClick = (activeTab) => {
    this.setState({
      activeTab,
    });
    // 跳转路由
    this.props.history.push(this.state.activeTabPathMap[activeTab]);
  };

  render() {
    return (
      <div className="tabbarContainer">
        {/* tabbar内容栏开始 */}
        <div className="tabbarContent">{this.props.children}</div>
        {/* tabbar内容栏结束 */}
        {/* 底部导航栏开始 */}
        <div className="tabbar">
          <div
            className="tabbarItem"
            onClick={this.handleClick.bind(this, "home")}
          >
            <i
              className={
                this.state.activeTab === "home"
                  ? "iconfont icon-shouye1 active1"
                  : "iconfont icon-shouye1"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "home" ? "title active" : "title"
              }
            >
              首页
            </span>
          </div>
          <div
            className="tabbarItem"
            onClick={this.handleClick.bind(this, "community")}
          >
            <i
              className={
                this.state.activeTab === "community"
                  ? "iconfont icon-shouye active1"
                  : "iconfont icon-shouye"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "community" ? "title active" : "title "
              }
            >
              分类
            </span>
          </div>
          <div
            className="tabbarItem"
            onClick={this.handleClick.bind(this, "cart")}
          >
            <i
              className={
                this.state.activeTab === "cart"
                  ? "iconfont icon-gouwuche active1"
                  : "iconfont icon-gouwuche"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "cart" ? "title active" : "title"
              }
            >
              购物车
            </span>
          </div>
          <div
            className="tabbarItem"
            onClick={this.handleClick.bind(this, "my")}
          >
            <i
              className={
                this.state.activeTab === "my"
                  ? "iconfont icon-wode active1"
                  : "iconfont icon-wode"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "my" ? "title active" : "title"
              }
            >
              我的
            </span>
          </div>
        </div>
        {/* 底部导航栏结束 */}
      </div>
    );
  }
}
